<template>
    <!--积分银行-->
  <div class="mainbox">
    <Banner></Banner>
    <!--人人为我，我为人人-->
    <!--<img src="../../assets/images/list_new/woweirenren.png" alt="" class="ren">-->
    <!--<img src="../../assets/images/list_new/renrenweiwo.png" alt="" class="wo">-->
    <!--人人为我，我为人人-->




    <mainContent :catname="catename">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{catename}}</dt>
          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>
        </dl>
      </div>

      <div slot="inner_content" class="inner_content">
        <div :class="content_type=='url'?'page_con':'page_con_class'" style="padding-right: 0px">

          <div v-if="is_flag==0"  v-html="new_rich_content"></div>

          <div v-if="is_flag==1" class="right">
            <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item)" class="dynamic_list">
              <p class="title_list" style="color: black;font-size: 30px">{{item.title}}</p>
              <div class="title_desc">{{item.desc | handelRichText(item.desc)}}</div>
              <p class="title_time" style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_time }}</p>
            </div>

            <!--添加分页-->
            <el-pagination
              :style="{'--activeColor':this.$util.storage.get('color')}"
              background
              layout="prev, pager, next"
              :page-size="6"
              :page-count="8"
              @current-change="pageChange"
              :total="total">
            </el-pagination>
            <!--添加分页-->

          </div>

          <router-view v-if="is_flag==3"   @childData="getactive"></router-view>

        </div>
      </div>

    </mainContent>
    <footerBar></footerBar>
    <MainMenu></MainMenu>

  </div>
    <!--积分银行-->
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'
  import NoData from '@/components/nodata/NoData'
    export default {
        name: "ScoreBank",
        data() {
        return {
          new_menu_list:[],//新列表的菜单数组
          article_param:null,//文章访问时候的参数
          content_type:null,//判断是链接还是单页
          isEmpty:false,//是否显示暂无数据，默认不显示
          page:1,//当前第几页，默认显示第一页
          size:6,//每页显示几条记录，默认显示为6条
          total:null,//分页列表总记录条数
          active:0,//当前的激活选项，默认为0
          new_rich_content:'',//新的富文本内容
          is_flag:2,//判断文章的显示状态，0文章页，1列表，
          dynamicList: [],//富文本数据
          title_detail:'',//调往详情页面的标题
          catename:'',
          menu_bg:''
        }
      },
      components: {
        Banner,
        MainMenu,
        footerBar,
        mainContent,
        NoData,
      },

      created() {
        this.menu_bg=this.$util.storage.get("menu_bg");
        console.log('acitive:',this.active)
        this.catename=this.$route.query.name;
        this.getColumnContent();

      },

      watch: {
        //监听相同路由下参数变化的时候，从而实现异步刷新
        '$route'(to,from) {
          console.log('1112acitive:',this.active)
        },
      },

      methods: {

        ToNewPath(item,index){
          let that = this;
          console.log('点击获得的item值为：',item);
          that.title_detail=item.title;//保存跳往详情页面的标题
          that.active=index;
          that.getPageAndLink(item,index);
        },

        toPath(item) {
          let that = this;
          console.log('进入详情页面：', item);
          that.$router.push("/detail?id=" + item.id+"&name="+that.title_detail);
        },//点击进入详情页面

        getColumnContent(){
          let that = this;
          let params = {
            vollege_id:that.$util.vollege_id,
            pid:that.$route.query.pid
          };
          that.$http.get("/api/PcData/getMenuData",params,r=>{
            console.log('获得的栏目数据为：r：',r.data.menu);
            that.new_menu_list=r.data.menu;
            that.getPageAndLink(r.data.menu[0],0);//判断第一项是文章还是列表，默认不能在后台设置成链接页面
          });
        },//获取栏目菜单，类型为文章页，列表页，混合页

        getPageAndLink(item,index){
          let that = this;
          console.log('item.content_type:',item.content_type);
          that.article_param=item.param;
          that.content_type=item.content_type;
          item.content_type != "url" ? that.isListContent(item):that.$router.push({path:item.url,query:{name:item.title,pid:item.id,childdata:index}});that.is_flag=3;
        },//判断是文章还是外链

        isListContent(item){
          let that = this;
          let params = {
            page:that.page,
            limit:that.size,
          }
          that.$http.get("/api/PcData/getData?"+item.param +"&vollege_id="+that.$util.vollege_id,params,r=>{
            console.log('获得的文章信息为：',r.data);
            r.data.length==1?that.is_flag=0:that.is_flag=1;
            r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
            r.data.length==0?that.isEmpty=true:that.isEmpty=false;
            that.total=r.data.length;
          });

        },//判断是否是列表还是单页面

        pageChange(page){
          console.log('页码发生了改变！当前页码：',page);
          let that = this;
          let params = {
            page:page,
            limit:that.size,
          }
          that.$http.get("/api/PcData/getData?"+that.article_param +"&vollege_id="+that.$util.vollege_id,params,r=>{
            console.log('获得的文章信息为：',r.data);
            r.data.length==1?that.is_flag=0:that.is_flag=1;
            r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
            r.data.length==0?that.isEmpty=true:that.isEmpty=false;
          });
        },

        getactive(data){
          console.log('子路由传递过来的值为：',data);
          let that = this;
          if (that.content_type != "url") {
            return;
          }
          data?that.active=data:that.active=0;
        },

          }
      }
</script>

<style scoped>
  .page_con_class {
    height: 630px!important;
    overflow-y: scroll;
  }

  .ren{
    position: absolute;
    z-index: 1000;
    top: 17%;
    left: 54%;
  }
  .wo{
    position: absolute;
    top: 17%;
    left: 20%;
    z-index: 1000;

  }
  .inner_content {
    /*padding: 60px 50px 0 260px;*/
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    overflow-y: scroll;
  }
  .mainbox{
    position: relative;
  }

  .menu_list {
    position: absolute;
    left: 0;
  }


  .son_menu {
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }

  .son_menu a {
    color: #fff;
  }

  .son_menu.hover {
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }

  .menu_dd.have {
    transition: all 0.3s ease-in;
  }




  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    overflow-y: scroll;
  }


  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .title_list{

  }
  .title_desc{
    width: 82%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 24px;
  }
  .title_time{

  }

  .el-pagination{
    height: 100px;
    padding-top: 53px;
    text-align: center;
  }
  .right >>> .el-pager{
    height: 100px;
  }
  .right >>> .el-pager li{
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 20px;
  }
  .right >>> .el-pager li:first-child{
    height: 50px;
    width: 50px;
    line-height: 50px;
    /*margin-left: 20px;*/
  }
  .right >>> .btn-prev{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .btn-next{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
    /*background: #29be74;*/
    background: var(--activeColor) !important;
  }



</style>
